.elegant-right-sidebar-container {
  background-color: var(--elegant-view-color);
}

.elegant-right-sidebar-hide-btn {
  color: var(--elegant-text-helper);
  background-color: var(--elegant-view-color);
  // box-shadow: 2px 5px 6px 3px #ffffff36;
  box-shadow: var(--elegant-shadow-color) 0 1px 4px;
}

.elegant-right-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden auto;
  background-color: var(--elegant-view-color);
  border-right: 1px solid var(--elegant-border-color);
  border-left: 1px solid var(--elegant-border-color);
  transition: width 0.3s;

  &.hide {
    width: 0;
    border: 0;
  }

  .elegant-breadcrumb {
    color: var(--elegant-text-main);
    border-bottom: 1px solid var(--elegant-border-color);

    .iconfont {
      font-size: var(--elegant-text-sm);
      color: var(--elegant-text-secondary);
    }
  }

  .elegant-actions-container {
    display: flex;

    .elegant-action-item {
      flex: 1;
      padding: 8px;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid var(--elegant-border-color);

      &::after {
        left: 50%;
        width: 0%;
        content: "";
      }

      &.checked {
        position: relative;
        color: var(--elegant-primary-color);
        transition: 0.3s all;

        &::after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          content: "";
          background-color: var(--elegant-primary-color);
          transition: 0.3s all;
        }
      }
    }
  }

  .elegant-sidebar-content {
    flex: 1;
    overflow: auto;
  }
}
